<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高考成绩柱状图</title>
    <script src="../../js/echarts.min.js"></script>
</head>
<body>
    <div style="width: 600px;height: 400px" id="main"></div>
    <div style="width: 600px;height: 400px" id="pie"></div>
</body>
    <script>
        //1、创建Echarts对象并初始化
        var myChart = echarts.init(document.getElementById("main"))
        //2、配置option
        option = {
            title: {
                text: "高考成绩"
            },
            legend: {
                data: ['成绩']
            },
            tooltip: {},
            xAxis: {
                name:'科目',
                type:'category',
                data: ["数学","语文","英语"]
            },
            yAxis: {
                max:'150',
                name:'成绩',
                type:'value'
            },
            series: [{
                name: '成绩',
                data: [100,145,130],
                type: 'bar'
            },
                {
                    name:'成绩',
                    data: [100,145,130],
                    type: 'line',
                    color:'red'
                }]
        }
        myChart.setOption(option)

        //饼状图
        var mypie = echarts.init(document.getElementById("pie"))

        pieOption = {
            title: {
                text: '饼状图',
                left: 'center'
            },
            tooltip: {
                formatter:'{a}<br/>{b}:{c}({d}%)',
            },
            legend:{
                orient:'vertical',
                 left: 'left'
            },
            series: [{
                name:'成绩',
                type:'pie',
                radius:'80%',
                data:[
                    {value:100,name:'语文'},
                    {value: 145,name:'数学'},
                    {value: 130,name: '英语'}
                ]
            }]
        }
        mypie.setOption(pieOption)
    </script>
</html>